<template>
  <view class="iphone-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-back" @click="goBack">
        <view class="back-arrow"></view>
        返回
      </view>
      <view class="nav-title">隐私政策</view>
    </view>

    <!-- 政策内容 -->
    <scroll-view class="agreement-container" scroll-y>
      <view>
        <view class="agreement-title">传奇IM隐私政策</view>

        <view class="agreement-text">
          传奇IM（以下简称“我们”）非常重视您的隐私和个人信息保护。本隐私政策旨在说明我们如何收集、使用、存储、共享及保护您的信息，以及您所享有的权利。
        </view>

        <view class="agreement-subtitle">一、我们收集的信息</view>
        <view class="agreement-text">
          在您使用传奇IM服务的过程中，我们可能会收集以下类型的信息：
        </view>
        <view class="agreement-list">
          <view class="agreement-list-item">1. 账户信息，如手机号码、昵称、头像等；</view>
          <view class="agreement-list-item">2. 使用信息，如聊天记录、登录日志、IP地址、设备信息等；</view>
          <view class="agreement-list-item">3. 位置信息（需要您授权后获取）；</view>
          <view class="agreement-list-item">4. 客服或反馈中您主动提供的信息。</view>
        </view>

        <view class="agreement-subtitle">二、我们如何使用信息</view>
        <view class="agreement-text">
          我们收集您的信息是为了向您提供高质量、个性化的服务，包括但不限于：
        </view>
        <view class="agreement-list">
          <view class="agreement-list-item">1. 提供账号注册、登录及身份验证服务；</view>
          <view class="agreement-list-item">2. 提供聊天、好友互动等核心功能；</view>
          <view class="agreement-list-item">3. 提升服务质量和用户体验；</view>
          <view class="agreement-list-item">4. 满足法律法规及监管要求。</view>
        </view>

        <view class="agreement-subtitle">三、信息的存储与保护</view>
        <view class="agreement-text">
          我们会使用各种安全技术和程序防止您的信息被未经授权访问、使用或泄漏。我们仅在实现目的所需的最短期限内保留您的信息。
        </view>

        <view class="agreement-subtitle">四、信息的共享与披露</view>
        <view class="agreement-text">
          我们不会向任何第三方出售或出租您的信息，除非得到您的明确同意或法律法规要求。我们可能会在以下情况下共享您的信息：
        </view>
        <view class="agreement-list">
          <view class="agreement-list-item">1. 获得您的授权；</view>
          <view class="agreement-list-item">2. 根据法律法规规定；</view>
          <view class="agreement-list-item">3. 向合作伙伴提供必要服务时（前提是签署保密协议）；</view>
          <view class="agreement-list-item">4. 为了保护用户或公众利益。</view>
        </view>

        <view class="agreement-subtitle">五、您的权利</view>
        <view class="agreement-text">
          您有权访问、更正、删除您的个人信息，并有权撤回授权、注销账号、获取副本等。如需行使上述权利，请通过APP内或客服渠道联系我们。
        </view>

        <view class="agreement-subtitle">六、政策的更新</view>
        <view class="agreement-text">
          我们可能会适时修订本政策，变更将在应用内公布，更新后的隐私政策将于公布后生效。您继续使用我们的服务即表示同意变更。
        </view>

        <view class="date-info">
          更新日期：2025年05月01日
          <br />
          生效日期：2025年05月08日
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn btn-decline" @click="onDecline">不同意</button>
      <button class="action-btn btn-agree" @click="onAgree">同意并继续</button>
    </view>
  </view>
</template>

<script setup>
const onAgree = () => {
  uni.showToast({
    title: '您已同意隐私政策，即将返回注册页面',
    icon: 'none',
  });
  uni.navigateBack();
};

const onDecline = () => {
  uni.showToast({
    title: '您需要同意隐私政策才能继续注册',
    icon: 'none',
  });
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.iphone-container {
  width: 100%;
  height: 100vh;
  max-width: 390px;
  max-height: 844px;
  aspect-ratio: 9 / 19.5;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-back {
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.back-arrow {
  width: 12px;
  height: 12px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  margin-right: 5px;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  flex-grow: 1;
  text-align: center;
  padding-right: 20px;
}

.agreement-container {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.agreement-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.agreement-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 25px 0 15px 0;
}

.agreement-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
  text-align: justify;
}

.agreement-list {
  margin: 15px 0;
  padding-left: 20px;
}

.agreement-list-item {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 10px;
  text-align: justify;
}

.highlight {
  color: #186ef2;
  font-weight: 500;
}

.action-bar {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 15px 20px;
  background-color: #ffffff;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.action-btn {
  width: 48%;
  height: 44px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-decline {
  background-color: #f2f2f2;
  color: #666;
}

.btn-decline:hover {
  background-color: #e0e0e0;
}

.btn-agree {
  background-color: #186ef2;
  color: white;
}

.btn-agree:hover {
  background-color: #0d5bd7;
}

.date-info {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin: 30px 0;
  white-space: pre-line;
}
</style>
